import Taro, { Component } from '@tarojs/taro'
import { AtButton } from 'taro-ui'
import classnames from 'classnames'
import PropsType from 'prop-types'
import { View, Text, Image } from '@tarojs/components'
import '../styles/inventory.scss'

const carIcon = require('../assete/icon_car.png')

export default class DInventory extends Component {

  onHandleDetail() {
    this.props.onHandleDetail && this.props.onHandleDetail()
  }

  onHandleFirst(e) {
    e.stopPropagation()
    this.props.onHandleFirst && this.props.onHandleFirst()
  }
  onHandleLast(e) {
    e.stopPropagation()
    this.props.onHandleLast && this.props.onHandleLast()
  }
  render() {
    const {
      className,
      order,
      status,
      list,
      carnum,
      stardata,
      color,
      firstText,
      lastText,
      createTime,
      vehicleOwnerName
    } = this.props
    console.log('[ this.props ]', this.props)
    return (
      <View className={classnames('b_inventory', className)} onClick={this.onHandleDetail.bind(this)}>
        <View className='b_inventory__munber'>
          <View className='b_inventory__munber_left'>
            {/* <Text className='b_inventory__munber_text'>盘</Text>
                        <Text className='b_inventory__munber_item'>{order}</Text> */}
          </View>
          <View className='b_inventory__munber_status'>{status}</View>
        </View>
        <View className='b_inventory__title'>
          {/* <Image src={carIcon} className='b_inventory__title_icon'></Image> */}
          <View className="b_advance__title_label">车型：</View>
          <View className='b_inventory__title_content'>
            {
              list && list.map((item, i) => {
                return <Text className='b_inventory__itemtitle' key={i}>{item}</Text>
              })
            }
          </View>
        </View>
        <View className='b_inventory__title'>
          <View className="b_advance__title_label">车主：</View>
          <View className='b_inventory__title_content'>
            <Text className='b_inventory__itemtitle'>{vehicleOwnerName}</Text>
          </View>
        </View>
        <View className='b_inventory__title gray_color'>
          <View className="b_advance__title_label">申请日期：</View>
          <View className='b_inventory__title_content'>
            <Text className='b_inventory__itemtitle gray_color'>{createTime}</Text>
          </View>
        </View>
        {/* <View className='b_inventory__addre'>车架号：{carnum}</View>
                <View className='b_inventory__addre'>外观/内饰：{color}</View>
                <View className='b_inventory__addre'>盘库结束日期：{stardata}</View> */}
        <View className='b_inventory__footer'>
          {
            firstText && <AtButton onClick={this.onHandleFirst.bind(this)}>{firstText}</AtButton>

          }
          {
            lastText && <AtButton onClick={this.onHandleLast.bind(this)}>{lastText}</AtButton>
          }
        </View>
      </View>
    )
  }
}

DInventory.defaultProps = {
  className: '',
  order: 'PK20191114001',
  status: '待盘库',
  list: ['保时捷718', '2018款'],
  stardata: '2019-11-25',
  color: '白色 / 灰色',
  carnum: 'ASDF1234567890123',
  firstText: '',
  onHandleDetail: () => { },
  onHandleFirst: () => { },
  onHandleLast: () => { }
}

DInventory.PropsType = {
  className: PropsType.oneOfType[PropsType.string, PropsType.object],
  order: PropsType.string,
  status: PropsType.string,
  list: PropsType.array,
  color: PropsType.string,
  stardata: PropsType.string,
  carnum: PropsType.string,
  firstText: PropsType.string,
  onHandleDetail: PropsType.func,
  onHandleFirst: PropsType.func,
  onHandleLast: PropsType.func
}
